在應用程式登入時
會有所謂的過場畫面
而這便是我們今天所要談論的主題

Splash Screen 提供了我們當 APP 載入時的能夠預先呈現的一個畫面效果
本次將提及 iOS 及 Android 的相關設定

iOS

在 iOS 的配置中在將 App 提交至 App Store 之前
都必須得先透過 Xcode storyboard 來提供 Splash Screen
在 Flutter 中的範本為 LaunchScreen.storyboard 而預設為空白的
因此如果有觀察到從模擬器打開時
一開始會有一段時間畫面是全白的
那便是放置 Splash Screen 的一段時間

那要如何去進行圖片的修改呢？
首先我們可以打開 Flutter App 中的 Xcode 專案
透過指令

open ios/Runner.xcworkspace

並且選擇 Runner/Assets.xcassets 並且將想替換的圖片放入 LaunchImage 圖片集合中
更多詳細內容可以看官網的教學 Human Interface Guidelines

Android

而在 Android 中則有兩種畫面呈現
一個是透過 Launch Screen 來控制開啟畫面
而另一個則是透過 Splash Screen 來控制 Flutter 初始呈現畫面
在 Android 的啟動時間 Android 提供 Lauch Screen 來呈現畫面
而相關修改可在 tyles.xml
進行修改

<style name="LaunchTheme" parent="@android:style/Theme.Black.NoTitleBar">
    <item name="android:windowBackground">@drawable/launch_background</item>
</style>

在 AndroidManifest.xml 中
可設定 FlutterActivity 的 theme 為 Launch Theme

<activity
    android:name=".MyActivity"
    android:theme="@style/LaunchTheme"
    // ...
    >
    <meta-data
        android:name="io.flutter.embedding.android.NormalTheme"
        android:resource="@style/NormalTheme"
        />
    <intent-filter>
        <action android:name="android.intent.action.MAIN"/>
        <category android:name="android.intent.category.LAUNCHER"/>
    </intent-filter>
</activity>

參考資料

強而有力的官網後盾